<template>
    <ul class="nowpl-ul">
        <li class="nowpl-ul-li" v-for="data in $store.state.comingList" :key="data.filmId">
            <div class="nowpl-ul-li-pic fl" @click="handleChangePage(data.filmId)">
                <img class="nowpl-img" :src="data.poster" alt="">
            </div>
            <div class="nowpl-ul-li-intro" @click="handleChangePage(data.filmId)">
                <span class="nowpl-name yahei-font">{{data.name}}</span>
                <p class="nowpl-grade-l font-grow yahei-font">
                    观众评分
                    <span class="nowpl-grade-r yahei-font">
                        {{data.grade}}
                    </span>
                </p >
                <p class="nowpl-director-l font-grow yahei-font">
                    主演：
                    {{ data.actors | actorfilter }}
                </p>

            </div>

        </li>
    </ul>
</template>

<script>
export default {
  mounted () {
    if (this.$store.state.comingList.length === 0) {
      // ajax
      this.$store.dispatch('getComingListAction')
    } else {
      console.log('huancun')
    }
  },
  methods: {
    handleChangePage (id) {
      console.log(id)
      // 编程式导航
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
